<script setup lang="ts">
// import Datas from '@/components/home/Datas.vue'
import LatestArticles from '@/components/article/LatestArticles.vue'
import GlobalSearch from '@/components/home/globalSearch.vue'
import LatestGallery from '@/components/gallery/LatestGallery.vue'
import LatestDiary from '@/components/diary/LatestDiary.vue'
import Datas from '@/components/home/Datas.vue'
import Functions from '@/components/home/Functions.vue'
import { ref, onMounted, onUnmounted } from 'vue'

const LatestArticles_isGrid = ref<boolean>(true)
const Latest_isChangeSmall = ref<boolean>(false)
const phoneWidth = ref<boolean>(false)

// 响应式处理文章排列方式
const handleResize = () => {
  if (window.innerWidth < 1300) {
    LatestArticles_isGrid.value = false
    Latest_isChangeSmall.value = true
  } else {
    Latest_isChangeSmall.value = false
    LatestArticles_isGrid.value = true
  }
  if (window.innerWidth < 1024) {
    phoneWidth.value = true
  } else {
    phoneWidth.value = false
  }
}

onMounted(() => {
  // 初始设置
  handleResize()
  // 监听窗口变化
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 清理监听器
  window.removeEventListener('resize', handleResize)
})

const searchTerm = ref<string>('')
const handleSearch = (val: string) => {
  searchTerm.value = val
  console.log(val)
}

</script>

<template>
  <div class="w-full">
    <GlobalSearch @search="handleSearch" />
    <div class="w-full flex flex-col items-center relative">
      <div class="sm:w-[300px] 
                  md:w-[400px] 
                  lg:w-[640px] 
                  xl:w-[1300px] xl:flex xl:justify-between xl:items-center">
        <Datas class="mb-12" />
        <Functions class="mb-12" />
      </div>
      <LatestArticles v-show="!searchTerm" :page-size="4" :state="1" :subsetId="-1" :isGrid="LatestArticles_isGrid"
        :isChangeSmall="Latest_isChangeSmall" class="lg:mb-20 mb-10" />
      <LatestGallery v-show="!searchTerm" :page-size="4" :state="1" :subsetId="-1" :isChangeSmall="Latest_isChangeSmall"
        class="lg:mb-20 mb-10" />
      <LatestDiary v-show="!searchTerm" :page-size="4" :isChangeSmall="Latest_isChangeSmall" class="lg:mb-20 mb-10" />
    </div>
  </div>
</template>

<style scoped></style>
